<template>
  <div class="password">
    <div class="password-box">
      <div class="title">忘记密码</div>
      <el-form label-position="right" :model="ruleForm">
        <el-form-item>
          <el-input v-model="ruleForm.phone" placeholder="输入手机号"></el-input>
        </el-form-item>
        <el-form-item placeholder="手机验证码：" class="code">
          <el-input v-model="ruleForm.code" placeholder="验证码" style="width: 280px"></el-input>
          <el-button style="width: 160px" class="codebtn btn" :disabled="isDisabled" type="primary"
            @click="sendCode">{{ buttonText }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-input v-model="ruleForm.newPassword" placeholder="输入新密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="ruleForm.confirmPassword" placeholder="确认新密码">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="error-box">
        <div class="error" v-show="errmessage.err">
          <i class="el-icon-warning"></i>
          <span>{{ errmessage.message }}</span>
        </div>
      </div>
      <div>
        <el-button class="preservation" type="primary" @click="submit()">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapGetters,
    mapActions
  } from "vuex";
  export default {
    components: {},
    data() {
      return {
        buttonText: "获取验证码",
        isDisabled: false, // 是否禁止点击发送验证码按钮
        canSubmit: false,
        errmessage: {
          err: false,
          message: "",
        },
        ruleForm: {
          oldPassword: "",
          newPassword: "",
          confirmPassword: "",
        },
      };
    },
    methods: {
      ...mapActions(["sendSms", "codeChangePwd"]),
      checkPhone() {
        if (!this.ruleForm.phone) {
          this.errmessage = {
            err: true,
            message: "请输入手机号",
          };
          this.canSubmit = false;
        } else if (!/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(this.ruleForm.phone)) {
          this.errmessage = {
            err: true,
            message: "手机号错误，请重输入",
          };
          this.canSubmit = false;
        } else {
          this.errmessage = {
            err: false,
            message: "",
          };
          this.canSubmit = true;
        }
        return this.canSubmit;
      },
      checkPassword() {
        const pat = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[\W_]).{8,20}$/;
        if (!this.ruleForm.code) {
          this.errmessage = {
            err: true,
            message: "请输入验证码",
          };
          this.canSubmit = false;
        } else if (!this.ruleForm.newPassword) {
          this.errmessage = {
            err: true,
            message: "新密码不能为空",
          };
          this.canSubmit = false;
        } else if (!pat.test(this.ruleForm.newPassword)) {
          this.errmessage = {
            err: true,
            message: "新密码长度为8-20位，可以为数字、字母、特殊符号",
          };
          this.canSubmit = false;
        } else if (!this.ruleForm.confirmPassword) {
          this.errmessage = {
            err: true,
            message: "请确认密码",
          };
          this.canSubmit = false;
        } else if (this.ruleForm.confirmPassword != this.ruleForm.newPassword) {
          this.errmessage = {
            err: true,
            message: "两次密码不一致",
          };
          this.canSubmit = false;
        } else {
          this.canSubmit = true;
        }
        return this.canSubmit;
      },
      // 发送验证码
      sendCode() {
        if (this.checkPhone()) {
          this.sendSms({
            mobile: this.ruleForm.phone,
            type: 4
          }).then((res) => {
            this.changeBtnText();
          });
        }
      },
      changeBtnText() {
        let time = 60;
        this.isDisabled = true;
        this.buttonText = "已发送（" + time + " s）";
        let timer = setInterval(() => {
          time--;
          this.buttonText = "已发送（" + time + " s）";
          if (time === 0) {
            clearInterval(timer);
            this.buttonText = "重新获取";
            this.isDisabled = false;
          }
        }, 1000);
      },
      submit() {
        if (this.checkPhone() && this.checkPassword()) {
          let data = {
            phone: this.ruleForm.phone,
            new_password: this.ruleForm.newPassword,
            phone_code: this.ruleForm.code,
          };
          this.codeChangePwd(data).then((res) => {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.$router.push({
              name: 'login'
            })
          });
        }
      },
    },
  };
</script>

<style scoped>
  .password {
    width: 100%;
    height: 100vh;

    background: url(../../../assets/images/login/login.png) no-repeat center;
    background-size: 100% 100%;
    position: relative;
  }

  .password-box {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 60px 50px;
    transform: translate(-50%, -55%);
    width: 456px;
    height: 568px;
    background: #ffffff;
  }

  .title {
    margin-bottom: 60px;
    text-align: center;
    color: #333333;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
  }

  .password>>>.el-form-item__label {
    width: 75px;
    text-align: left;
    padding-right: 0;
  }

  .password>>>.el-form-item__content {
    width: 100%;
  }

  .password>>>.el-input__inner {
    width: 100%;
    height: 60px;
  }

  .password>>>.el-form-item {
    display: flex;
    width: 100%;
    margin: 15px 0;
    padding-bottom: 10px;
    height: 60px;
  }

  .preservation {
    width: 100%;
    height: 60px;
    background: #0B4696;
    box-shadow: 0px 7px 27px 0px rgba(50, 129, 255, 0.51);
    border-radius: 2px;
    cursor: pointer;
    margin-top: 20px;
    font-size: 18px;
  }

  .btn {
    width: 160px;
    height: 60px;
    background: #f1f7ff;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #0B4696;
    margin-left: 10px;
    border: none;
  }

  .error-box {
    width: 100%;
    height: 28px;
    margin-top: 30px;
  }

  .error {
    height: 28px;
    background: #feefef;
    border: 1px dashed #ffd5d5;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ff1e1e;
    line-height: 28px;
    margin-top: 30px;
  }

  .error i {
    font-size: 16px;
    margin: 6px 11px;
  }
</style>